<template>
  <div class="qu_details_information">
    <div class="qu_title">
      <div>
        <div>海口-恒大外滩</div>
        <div>16000元/㎡</div>
      </div>
      <div>
        <div>
          <span class="iconfont icon-ditu"></span>
          <span>海口-龙华区 杜海路2号</span>
        </div>
        <div>参考均价</div>
      </div>
    </div>
    <div class="qu_information_content">
      <div class="qu_information_title">小区信息</div>
      <div class="content">
        <div>
          <div>建筑类别：<span>小高层|高层</span></div>
          <div>总户数：<span>暂无数据</span></div>
        </div>
        <div>
          <div>产权类别：<span>商品房住宅</span></div>
          <div>物业费：<span>1.00元/平/月</span></div>
        </div>
        <div>
          <div>产权年限：<span>70年</span></div>
          <div>容积率：<span>暂无数据</span></div>
        </div>
        <div>
          <div>建筑年代：<span>2015年</span></div>
          <div>绿化率：<span>暂无数据</span></div>
        </div>
        <div>
          <div>物业公司：<span>海南恒大物业有限公司</span></div>
        </div>
        <div>
          <div>开发商：<span>海南恒大物业有限公司</span></div>
        </div>
        <div>
          <div>停车位：<span>暂无数据</span></div>
        </div>
        <div>
          <div>小区概况：<span>暂无数据</span></div>
        </div>
        <div>
          <div>小区内配套：<span>暂无数据</span></div>
        </div>
      </div>
    </div>
    <div class="sell_lease">
      <div class="sell_lease_title">
        <div>
          <div @click="checkHouse(1)" :class="{bottom_color:sellOrLease === 1}">二手房(174套)</div>
        </div>
        <div class="after"></div>
        <div>
          <div @click="checkHouse(2)" :class="{bottom_color:sellOrLease === 2}">租房(174套)</div>
        </div>
      </div>
      <div class="sell_lease_content">
        <div v-if="sellOrLease === 1">
          <list-content v-if="houseListData" :houseListData="houseListData"></list-content>
        </div>
        <div v-else>
          <renting-list v-if="rentingData" :houseListData="rentingData"></renting-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import ListContent from '../listComponents/ListContent';
  import RentingList from '../listComponents/RentingList';

  export default {
    name: 'QuDetailsInformation',

    data() {
      return {
        sellOrLease: 1,
        houseListData: [
          {
            'id': 84,
            'city_code': 4601,
            'developer': '广汉市宏跃商贸有限公司',
            'area_code': 460109,
            'title': null,
            'all_floor': null,
            'labels': null,
            'sell': 888,
            'sell_average': 30000,
            'building_year': 2018,
            'ht_room_num': 3,
            'ht_office_num': 3,
            'in_acreage': null,
            'acreage': 666,
            'name': '海甸上苑',
            'file': null,
            'floor': {
              'title': '低层'
            },
            'area': {
              'region_name_c': '海口市'
            }
          },
          {
            'id': 145,
            'city_code': 4601,
            'developer': '海口大成置业有限公司',
            'area_code': 460108,
            'title': null,
            'all_floor': null,
            'labels': null,
            'sell': null,
            'sell_average': null,
            'building_year': 2018,
            'ht_room_num': 3,
            'ht_office_num': 3,
            'in_acreage': null,
            'acreage': 999,
            'name': '金隅大成西溪里',
            'file': null,
            'floor': {
              'title': '低层'
            },
            'area': {
              'region_name_c': '海口市'
            }
          }
        ],
        rentingData:[
          {
            "id":84,
            "city_code":4601,
            "developer":"广汉市宏跃商贸有限公司",
            "area_code":460109,
            "title":null,
            "all_floor":null,
            "labels":['合租','南北通透','押一付一'],
            "sell":3000,
            "sell_average":30000,
            "building_year":2018,
            "ht_room_num":3,
            "ht_office_num":3,
            "in_acreage":null,
            "acreage":97,
            "name":"海甸上苑",
            "file":{
              "save_path":'https://kf.wuyoufang.cn/upload/premises/20180808/247a80b0e7686844e00ab0dafff823db.jpg'
            },
            "floor":{
              "title":"低层"
            },
            "area":{
              "region_name_c":"海口市"
            }
          },
          {
            "id":10,
            "city_code":4601,
            "developer":"广汉市宏跃商贸有限公司",
            "area_code":460109,
            "title":null,
            "all_floor":null,
            "labels":['合租','南北通透','押一付一'],
            "sell":3000,
            "sell_average":30000,
            "building_year":2018,
            "ht_room_num":3,
            "ht_office_num":3,
            "in_acreage":null,
            "acreage":97,
            "name":"海甸上苑",
            "file":{
              "save_path":'https://kf.wuyoufang.cn/upload/premises/20180808/247a80b0e7686844e00ab0dafff823db.jpg'
            },
            "floor":{
              "title":"低层"
            },
            "area":{
              "region_name_c":"海口市"
            }
          }
        ]
      };
    },
    methods: {
      checkHouse(type) {
        this.sellOrLease = type;
      }
    },
    components: {
      ListContent,
      RentingList
    }
  };
</script>

<style scoped>
  .qu_details_information .qu_title > div {
    display: flex;
    justify-content: space-between;
    padding: 5px 10px;
  }

  .qu_details_information .qu_title > div:nth-child(1) > div:nth-child(2) {
    color: #e6191e;
  }

  .qu_details_information .qu_title > div:nth-child(2) {
    font-size: 0.8rem;
    color: #999;
  }

  .qu_details_information .qu_information_content {
    margin-top: 20px;
    border-bottom: 10px solid #eeeeee;
    padding-bottom: 10px;
  }

  .qu_details_information .qu_information_content .qu_information_title {
    padding: 10px;
    border-bottom: 1px solid #eeeeee;
  }

  .qu_details_information .qu_information_content .content > div {
    display: flex;
    padding: 5px 10px;
    color: #999999;
  }

  .qu_details_information .qu_information_content .content > div > div:nth-child(2) {
    width: 50%;
    position: absolute;
    right: 0;
  }

  .qu_details_information .qu_information_content .content span {
    color: #666;
  }

  /*出售/出租*/
  .qu_details_information .sell_lease {

  }

  .sell_lease .sell_lease_title {
    display: flex;
    border-bottom: 1px solid #eee;
    height: 50px;
    line-height: 40px;
    position: relative;
  }

  .sell_lease .sell_lease_title > div {
    width: calc(50% - 1px);
    display: flex;
  }

  .sell_lease .sell_lease_title > div:nth-child(2) {
    width: 1px;
    padding: 10px 0;
    background: #eee;
    height: 10px;
    margin: auto 0;
  }

  .sell_lease .sell_lease_title > div > div {
    margin: 0 auto;
    display: inline-block;
    padding: 5px;
    justify-content: center;

  }

  .bottom_color {
    border-bottom: 2px solid #e6191e;
  }

  .sell_lease .sell_lease_content {

  }
</style>
